<template>
	<view>
		<view style="padding: 20rpx 30rpx;">
			<u-search bgColor="#fff" :showAction="false" placeholder="请输入关键长尾词查询实时排名" v-model="keyword"></u-search>
		</view>
		<view class="card">
			<view class="card-tit flex align between">
				<view>长尾关键词</view>
				<view>抖音昵称</view>
				<view>排名</view>
				<view>排名视频</view>
			</view>
			<view class="card-list">
				<view class="flex align list-item between" v-for="(item,index) in list" :key="index">
					<view class="item flex align">
						<image src="../../static/rank/one.png"></image>
						<view>二手车</view>
					</view>
					<view class="item">猴哥说车</view>
					<view class="item">1</view>
					<view class="item look">查看视频</view>
				</view>
				<xw-empty :isShow="empty" text="暂无数据" textColor="#777777"></xw-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				empty:true,
				list:[]
			};
		}
	}
</script>

<style lang="scss" scoped>
.card{
	background: white;
	height: 1080rpx;
	border-radius: 20rpx 20rpx 0 0;
	position: fixed;
	width: 100%;
	top: 108rpx;
	.card-tit{
		margin: 0 28rpx;
		padding: 20rpx 16rpx 16rpx;
		font-size: 28rpx;
		border-bottom: solid 1rpx #707070;
		view{
			width: 25%;
			text-align: center;
		}
	}
	.card-list{
		margin: 0 28rpx;
		padding: 20rpx 16rpx 16rpx;
		.list-item{
			font-size: 24rpx;
			text-align: center;
			margin-bottom: 43rpx;
			.item{
				width: 25%;
				justify-content: center;
				image{
					width: 28rpx;
					height: 34rpx;
					margin-right: 24rpx;
				}
			}
			.look{
				background: #FFCDB8;
				padding: 3rpx 8rpx;
				border-radius: 14rpx;
				width: fit-content;
				margin: 0 auto;
			}
		}
	}
}
</style>